<template>
    <el-row class="circular"  v-loading="loading">
            <el-col :span="6"><div class="ItemList">
                <div class="ItemList_top">
                    <span class="title">项目列表</span>
                    <el-dialog  :visible.sync="createProjectUp" >
                        <el-form :model="createProjectForm" :rules="createProjectFormRules" label-width="130px">
                            <el-form-item label="项目名称：" prop="name">
                                <el-input v-model="createProjectForm.name"  placeholder="请输入项目名称"></el-input>
                            </el-form-item>
                            <el-form-item label="发改立项代码：" prop="IAProjectNumber">
                                <el-input v-model="createProjectForm.IAProjectNumber"   placeholder="请输入发改立项代码"></el-input>
                            </el-form-item>
                            <el-form-item label="筑建项目代码：" prop="constructionProjectNumber">
                                <el-input v-model="createProjectForm.constructionProjectNumber"   placeholder="请输入筑建项目代码"></el-input>
                            </el-form-item>
                            <el-form-item label="规划地块编号：" prop="planningPlotNumber">
                                <el-input v-model="createProjectForm.planningPlotNumber"  placeholder="请输入规划地块编号"></el-input>
                            </el-form-item>
                            <el-form-item label="宗地号：" prop="groundNumber">
                                <el-input v-model="createProjectForm.groundNumber"   placeholder="请输入宗地号"></el-input>
                            </el-form-item>
                            <el-form-item label="项目事件:" prop="status">
                                <!--                        <el-input v-model="createProjectForm.status" autocomplete="off" style="width: 300px" placeholder="请输入项目事件"></el-input>-->
                                <el-select v-model="createProjectForm.status" placeholder="请输入项目事件" style="width: 330px">
                                    <el-option label="提交申请" value="提交申请"></el-option>
                                    <el-option label="申请中" value="申请中"></el-option>
                                    <el-option label="申请完成" value="申请完成"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="createProjectUp = false">取 消</el-button>
                            <el-button type="primary" @click="createProject">确 定</el-button>
                        </div>
                    </el-dialog>

                    <el-dialog  :visible.sync="HomeCode" >
                        <img :src="icon" alt="">
                    </el-dialog>

                    <el-dialog  :visible.sync="CertificateCode" >
                        <img :src="icon3" alt="">
                    </el-dialog>

                    <el-dialog  :visible.sync="DocumentCodeCode" >
                        <img :src="icon4" alt="">
                    </el-dialog>

                    <el-button type="primary" @click="createProjectUp=true" icon="el-icon-circle-plus-outline">创建项目</el-button>
                </div>
                <hr/>
                <div class="content">
                    <div v-for="(item,index) in projectList"
                         :key="index"
                         class="project"
                         @click="toDetails(index)"
                    >
                        <!--                    <img src="../assets/img/certificate_img/bg.png" alt="">-->
                        <span>{{item.name}}</span>
                        <div class="button">
                            <span>发改立项代码:{{item.iaprojectNumber}}</span>
                            <span>筑建项目代码:{{item.constructionProjectNumber}}</span>
                        </div>

                    </div>
                </div>
            </div></el-col>
            <el-col :span="18"> <div class="right">


                <div class="top_box">
                    <el-dialog  :visible.sync="upDataProjectUp" >
                        <el-form :model="upDataProjectForm"  label-width="110px">
                            <el-form-item label="发改立项代码" prop="IAProjectNumber">
                                <el-input v-model="upDataProjectForm.IAProjectNumber" placeholder="请输入发改立项代码"></el-input>
                            </el-form-item>
                            <el-form-item label="筑建项目代码" prop="constructionProjectNumber">
                                <el-input v-model="upDataProjectForm.constructionProjectNumber" placeholder="请输入筑建项目代码"></el-input>
                            </el-form-item>
                            <el-form-item label="规划地块编号" prop="planningPlotNumber" >
                                <el-input v-model="upDataProjectForm.planningPlotNumber" placeholder="请输入规划地块编号"></el-input>
                            </el-form-item>
                            <el-form-item label="宗地号" prop="groundNumber">
                                <el-input v-model="upDataProjectForm.groundNumber" placeholder="请输入宗地号"></el-input>
                            </el-form-item>
                            <el-form-item label="项目事件" prop="status">
                                <el-select v-model="upDataProjectForm.status" placeholder="请选择项目事件" style="width: 350px">
                                    <el-option label="提交申请" value="提交申请"></el-option>
                                    <el-option label="申请中" value="申请中"></el-option>
                                    <el-option label="申请完成" value="申请完成"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="upDataProjectUp=false">取 消</el-button>
                            <el-button type="primary" @click="upDataProject">确 定</el-button>
                        </div>
                    </el-dialog>
                    <div style="display: flex;align-items:center;justify-content: space-between;margin-right: 50px">
                        <span class="title">{{projectList[num].name}}详情</span>
                        <el-button type="primary" @click="upDataProjectUpShow">更新项目</el-button>
                    </div>
                    <div class="box2">
                        <img :src="icon2" alt="" style="width: 141px;height: 141px;margin-right: 15px">
                        <el-descriptions :title="projectList[num].name">
                            <el-descriptions-item label="发改立项代码">{{projectList[num].iaprojectNumber}}</el-descriptions-item>
                            <el-descriptions-item label="筑建项目代码">{{projectList[num].constructionProjectNumber}}</el-descriptions-item>
                            <el-descriptions-item label="规划地块编号">{{projectList[num].planningPlotNumber}}</el-descriptions-item>
                            <el-descriptions-item label="宗地号">{{projectList[num].groundNumber}}</el-descriptions-item>
                            <el-descriptions-item label="状态">{{projectList[num].status}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>


                <div class="button_box">


                    <div class="CertificateInformation">


                        <div class="CertificateInformation_top">
                            <span class="title">书证信息</span>
                            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="createCertificateUp=true">创建书证</el-button>
                            <el-dialog  :visible.sync="createCertificateUp" >
                                <el-form :model="createCertificateForm" label-width="100px" :rules="createCertificateFormRules">
                                    <el-form-item label="书证名" prop="name">
                                        <el-input v-model="createCertificateForm.name"  placeholder="请输入书证名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建时间"  prop="createDate">
                                        <el-date-picker
                                                v-model="createCertificateForm.createDate"
                                                type="date"
                                                style="width: 360px"
                                                placeholder="请选创建时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="发证单位"  prop="createUnit">
                                        <el-input v-model="createCertificateForm.createUnit"  placeholder="请输入发证单位"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态"  prop="status">
                                        <el-select v-model="createCertificateForm.status" placeholder="请选择状态" style="width: 360px">
                                            <el-option label="提交申请" value="提交申请"></el-option>
                                            <el-option label="申请中" value="申请中"></el-option>
                                            <el-option label="申请完成" value="申请完成"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="createCertificateUp = false">取 消</el-button>
                                    <el-button type="primary" @click="createCertificate">确 定</el-button>
                                </div>
                            </el-dialog>


                        </div>


                        <hr/>
                        <div class="content">
                            <div v-for="(item,index) in certificateList"
                                 :key="index"
                                 class="project"
                            >
                                <!--                            <img src="../assets/img/certificate_img/home.jpg" alt="">-->
                                <div>
                                    <span>{{item.name}}</span>
                                    <div class="button">
                                        <span>编号：{{item.id}}</span>
                                        <span>状态：{{item.status}}</span>
                                    </div>
                                    <div class="watchHomeCode">
                                        <span  @click="watchHomeCode(index)">查看书证家园码</span>
                                        <span  @click="watchHistory(index)">查看书证变更记录</span>
                                    </div>
                                </div>
                                <div style="align-self: flex-start;margin-right: -30px;margin-top: 4px">
                                    <el-button type="primary" icon="el-icon-edit" circle  size="mini"  @click="watchCertificate(index)"></el-button>
                                </div>


                            </div>


                            <el-dialog  :visible.sync="CertificateUp" >
                                <el-form :model="CertificateUpDataForm" label-width="100px" >
                                    <el-form-item label="书证名" prop="name">
                                        <el-input v-model="CertificateUpDataForm.name"  placeholder="请输入书证名" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建时间" prop="createDate">
                                        <el-date-picker
                                                v-model="CertificateUpDataForm.createDate"
                                                type="date"
                                                style="width: 360px"
                                                placeholder="请选创建时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="发证单位" prop="createUnit">
                                        <el-input v-model="CertificateUpDataForm.createUnit"  placeholder="请输入发证单位"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="status" >
                                        <!--                                    <el-input v-model="CertificateUpDataForm.status"   placeholder="请输入状态"></el-input>-->
                                        <el-select v-model="CertificateUpDataForm.status" placeholder="请选择状态">
                                            <el-option label="提交申请" value="提交申请"></el-option>
                                            <el-option label="申请中" value="申请中"></el-option>
                                            <el-option label="申请完成" value="申请完成"></el-option>
                                        </el-select>

                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="CertificateUp = false">取 消</el-button>
                                    <el-button type="primary" @click="CertificateUpData">确 定</el-button>
                                </div>
                            </el-dialog>

                        </div>
                    </div>



                    <div class="option">
                        <div class="option_top">
                            <el-menu  class="el-menu-demo" mode="horizontal" >
                                <el-menu-item index="1">审批信息</el-menu-item>
                                <el-menu-item index="2" disabled>日志记录</el-menu-item>
                            </el-menu>
                            <div class="search">
                                <el-input placeholder="搜索内容" style="width: 313px"></el-input>
                                <el-button type="primary" disabled>搜索</el-button>
                            </div>
                        </div>
                        <div class="block" style="margin-top: 20px">
                            <el-timeline style="max-height:400px;overflow: auto;">
                                <el-timeline-item placement="top"
                                                  v-for="(item,index) in projectChangeList"
                                                  :key="index"
                                >
                                    <el-card>
                                        <p class="time">{{item.timestamp}}</p>
                                        <p class="detail">状态:{{item.status}}</p>
                                        <p CLASS="detail">区块交易HASH：{{item.txId}}</p>
                                    </el-card>
                                </el-timeline-item>

                            </el-timeline>
                            <el-dialog  :visible.sync="watchCHistory" >
                                <el-timeline>
                                    <el-timeline-item placement="top"
                                                      v-for="(item,index) in certificateChangeList"
                                                      :key="index"
                                    >
                                        <el-card class="historyCard">
                                            <p class="time">{{item.timestamp}}</p>
                                            <p class="detail">状态:{{item.status}}</p>
                                            <p CLASS="detail">区块交易HASH:{{item.txId}}</p>
                                        </el-card>
                                    </el-timeline-item>

                                </el-timeline>
                            </el-dialog>
                        </div>

                    </div>


                </div>


            </div></el-col>
    </el-row>
</template>

<script>
    import {post,get} from '../utils/request'
    import qs from 'qs'
    export default {
        name: "certificate",
        data() {
            return {
                loading:true,
                watchCHistory:false,
                DocumentCodeCode:false,
                num3:0,
                icon4:'',
                upDataProjectForm:{
                    projectId:"",
                    IAProjectNumber:"",
                    constructionProjectNumber:"",
                    planningPlotNumber:"",
                    groundNumber:"",
                    status:''
                },
                upDataProjectFormRules:{
                    IAProjectNumber:[
                        { required: true, message: '请输入发改立项代码', trigger: 'blur' },
                    ],
                    constructionProjectNumber:[
                        { required: true, message: '请输入筑建项目代码', trigger: 'blur' },
                    ],
                    planningPlotNumber:[
                        { required: true, message: '请输入规划地块编号', trigger: 'blur' },
                    ],
                    groundNumber:[
                        { required: true, message: '请输入宗地号', trigger: 'blur' },
                    ],
                    status:[
                        { required: true, message: '请选择状态', trigger: 'change' },
                    ],
                },
                upDataProjectUp:false,
                CertificateUp:false,
                CertificateUpDataForm:{
                    documentId:'',
                    name:'',
                    createDate:'',
                    createUnit:'',
                    status:''
                },
                CertificateUpDataFormRules:{
                    name:[
                        { required: true, message: '请输入书证名', trigger: 'blur' },
                    ],
                    createDate:[
                        { required: true, message: '请选择创建时间', trigger: 'change' },
                    ],
                    createUnit:[
                        { required: true, message: '请输入发证单位', trigger: 'blur' },
                    ],
                    status:[
                        { required: true, message: '请选择状态', trigger: 'change' },
                    ],
                },
                num2:0,
                CertificateCode:false,
                icon3:"",
                createCertificateForm:{
                    name:'',
                    createDate:'',
                    createUnit:'',
                    status:'',
                    projectId:'',
                },
                createCertificateFormRules:{
                    name:[
                        { required: true, message: '请输入书证名', trigger: 'blur' },
                    ],
                    createDate:[
                        { required: true, message: '选择时间', trigger: 'change' },
                    ],
                    createUnit:[
                        { required: true, message: '请输入发证单位', trigger: 'blur' },
                    ],
                    status:[
                        { required: true, message: '请选择状态', trigger: 'change' },
                    ],
                    projectId:[

                    ],
                },
                createCertificateUp:false,
                icon2:'',
                num:0,
                HomeCode:false,
                icon:'',
                createProjectUp:false,
                createProjectForm:{
                    name:'',
                    IAProjectNumber:'',
                    constructionProjectNumber:'',
                    planningPlotNumber:'',
                    groundNumber:'',
                    status:'',
                },
                createProjectFormRules:{
                    name:[
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                    ],
                    IAProjectNumber:[
                        { required: true, message: '请输入发改立项代码', trigger: 'blur' },
                    ],
                    constructionProjectNumber:[
                        { required: true, message: '请输入筑建项目代码', trigger: 'blur' },
                    ],
                    planningPlotNumber:[
                        { required: true, message: '请输入规划地块编号', trigger: 'blur' },
                    ],
                    groundNumber:[
                        { required: true, message: '请输入宗地号', trigger: 'blur' },
                    ],
                    status:[
                        { required: true, message: '请输入项目事件', trigger: 'blur' },
                    ],
                },
                projectList:[
                    {
                        id:'',
                        name:'',
                    }
                ],
                certificateList:[],
                projectChangeList:[],
                certificateChangeList:[],
                projectLis2:[],
                firstId:"",
                flag:false
            }
        },

        mounted(){
            this.getProjectList()
        },
        methods:{
            //注册项目
            createProject(){
                this.createProjectUp=false
                post('/createProject', qs.stringify(this.createProjectForm)).then(res=>{
                    console.log(res,23333333333333333333333333)
                    this.icon = res.data
                    this.HomeCode=true
                    this.getProjectList()
                })
            },
            //获取项目列表
            getProjectList(){
                    get('/findAllProject',{
                        pageSize:9999,
                        pageNumber:1
                    }).then(res=>{

                        if(res.data.content.length>0){
                            this.projectList=res.data.content
                            console.log(this.projectList,"LIst")
                            var id = 0
                            if(this.flag===true){
                             id=this.projectList[this.num].id
                                console.log(true)
                            }
                            else{
                                id=this.projectList[0].id
                            }
                            console.log(this.projectList[0].id,44444)
                            get('/findProjectCodeById',{
                                projectId:id
                            }).then(res=>{
                                console.log(id,'code')
                                this.icon2=res.data
                            })
                            get('/findDocumentsByProjectId',{
                                projectId:id
                            }).then(res=>{
                                // console.log(res)
                                console.log(id,'Documents')
                                this.certificateList= res.data
                                this.certificateList.status=''
                            })
                            get('/findProjectById',{
                                id:id
                            }).then(res=>{
                                console.log(id,'Project')
                                this.projectChangeList = res.data
                                for(var i=0;i<res.data.length;i++){
                                    var obj1 =  res.data[i].record.data.substr(0,res.data[i].record.data.length)
                                    var obj = eval('(' + obj1 + ')');
                                    res.data[i].status=obj.status
                                    this.loading=false
                                }
                            })
                            this.upDataProjectForm.projectId=id
                        }
                        else {
                            this.loading=false
                        }


                    });
            },

            upDataProjectUpShow(){
                this.upDataProjectUp = true;
                get('/findProjectByIdFromDataBase',{
                    id:this.upDataProjectForm.projectId
                }).then(res=>{
                    // console.log(res)
                    this.upDataProjectForm =res.data
                    this.upDataProjectForm.IAProjectNumber=res.data.iaprojectNumber
                    this.upDataProjectForm.status = ''
                })
            },

            // upDataProjectUpShow2(){
            //     get('/findProjectByIdFromDataBase',{
            //         id:this.upDataProjectForm.projectId
            //     }).then(res=>{
            //         // console.log(res)
            //         this.upDataProjectForm =res.data
            //         this.upDataProjectForm.IAProjectNumber=res.data.iaprojectNumber
            //         this.upDataProjectForm.status = ''
            //     })
            // }

            //更新项目
            upDataProject(){
                delete this.upDataProjectForm.iaprojectNumber
                this.upDataProjectForm.projectId= this.upDataProjectForm.id
                // console.log(this.upDataProjectForm,"=========================")
                get('/updateProject',this.upDataProjectForm).then(res=>{
                    console.log(this.num,'num')
                    // this.upDataProjectUp=false
                    this.$message({
                        message: res.data,
                        type: 'success'
                    });
                    this.flag=true
                    this.getProjectList()
                    this.getProjectHistory()
                    this.upDataProjectUp=false
                })
            },
            //项目详情
            toDetails(ind){
                this.loading=true
                this.num=ind

                // console.log(this.projectList)
                console.log(this.num,'num')
                // console.log(this.num)
                this.upDataProjectForm.projectId=this.projectList[this.num].id
                // console.log( this.upDataProjectForm.projectId)
                get('/findProjectCodeById',{
                    projectId:this.projectList[this.num].id
                }).then(res=>{
                    this.icon2=res.data

                })
                this.getCertificate()
                this.getProjectHistory()
            },
            //获取项目变更记录
            getProjectHistory(){
                get('/findProjectById',{
                    id:this.projectList[this.num].id
                }).then(res=>{
                    if(this.projectList.length>0){
                        this.projectChangeList = res.data
                        for(var i=0;i<res.data.length;i++){
                            var obj1 =  res.data[i].record.data.substr(0,res.data[i].record.data.length)
                            var obj = eval('(' + obj1 + ')');
                            res.data[i].status=obj.status
                            this.loading=false

                        }
                         this.flag=false
                    }else {
                        this.loading=false
                        this.flag=false
                    }

                })
            },
            //创建书证
            createCertificate(){
                this.createCertificateUp=false
                this.createCertificateForm.projectId=this.projectList[this.num].id
                post('/createDocument', qs.stringify(this.createCertificateForm)).then(res=>{
                    // console.log(res)
                    this.icon3 = res.data
                    this.CertificateCode=true
                    this. getCertificate()
                })
            },
            //获取书证
            getCertificate(){
                get('/findDocumentsByProjectId',{
                    projectId:this.projectList[this.num].id
                }).then(res=>{
                    // console.log(res)
                     this.certificateList= res.data
                    this.certificateList.status=''
                })
            },
            //查看书证
            watchCertificate(ind){
                this.num2=ind
                this.CertificateUp=true
                get('/findDocumentByIdFromDataBase',{
                    id:this.certificateList[this.num2].id
                }).then(res=>{
                    console.log(res)
                    this.CertificateUpDataForm=res.data
                })
            },


            //跟新书证
            CertificateUpData(){
                this.CertificateUpDataForm.documentId=this.CertificateUpDataForm.id
                // console.log(this.CertificateUpDataForm)
                this.CertificateUp=false
                get('/updateDocument',
                    this.CertificateUpDataForm
                ).then(res=>{
                    console.log(res,"============================")
                    this.$message({
                        message: res.data,
                        type: 'success'
                    });
                    this.getCertificate()
                })
            },
            //查看书证变更记录
            watchHistory(ind){
                event.stopPropagation()
                this.watchCHistory = true
                this.num3 = ind
                get('/findDocumentById',{
                    id:this.certificateList[this.num3].id
                }).then(res=>{
                    console.log(res)
                    this.certificateChangeList= res.data
                    for(var i=0;i<res.data.length;i++){
                        var obj1 =  res.data[i].record.data.substr(0,res.data[i].record.data.length)
                        var obj = eval('(' + obj1 + ')');
                        console.log(obj.status,"@@@@@@@@@@")
                        res.data[i].status=obj.status
                    }
                    })
            },
            //查看书证家园码
            watchHomeCode(ind){
                event.stopPropagation()
                this.DocumentCodeCode=true
                this.num3 = ind
                console.log(   this.certificateList[this.num3])

                get('/findDocumentCodeById',{
                    documentId:this.certificateList[this.num3].id
                }).then(res=>{
                    // console.log(res)
                    this.icon4=res.data
                })
            }
        },
    }
</script>

<style scoped lang="less">
.circular{
    display: flex;
    justify-content: space-around;
   .ItemList{
       width: 390px;
       height: 822px;
       opacity: 1;
       background: #ffffff;
       border-radius: 8px;
       box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
       max-height:822px ;
       .ItemList_top{
           height: 50px;
           display: flex;
           align-items: center;
           justify-content: space-around;
           /deep/.el-dialog{
               width: 500px;
           }
           span{
               font-size: 14px;
               font-family: PingFang SC, PingFang SC-Bold;
               font-weight: 700;
               text-align: left;
               color: #000000;
           }
       }
       .content{
           display: flex;
           flex-direction: column;
           align-items: center;
           max-height: 750px;
           overflow: auto;
       }
       .project{
           overflow: auto;
           transition: all 0.2s;
           cursor: pointer;
           /*filter: grayscale(100%);*/
           min-height:92px ;
           padding-left: 20px;
           width: 330px;
           height: 92px;
           opacity: 1;
           background: url("../assets/img/certificate_img/bg.png");
           background-size:cover;
           border-radius: 5px;
           font-weight: 700;
           text-align: left;
           color: #ffffff;
           font-size: 14px;
           display: flex;
           flex-direction: column;
           margin-top: 16px;
           /*position: relative; !** 相对布局 **!*/
           span{margin-top: 20px}
           .button{
               /*z-index: 10;*/
               font-size: 12px;
               margin-top: 14px;
               span:nth-child(2){
                   margin-left: 10px;
               }
           }
       }
       .project:hover{
           filter: brightness(130%);
           /*top: 2px; !**向下偏移2px **!*/
       }
   }
    .right{
        width: 1230px;
        height: 822px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top_box{
            padding-left: 30px;
            width: 1200px;
            height: 290px;
            opacity: 1;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            /deep/.el-dialog{
                width: 500px;
            }
            .title{
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Bold;
                font-weight: 700;
                color: #000000;
                align-self: flex-start;
            }
            .box2{
                display: flex;
            }
        }
        .button_box{
            display: flex;
            justify-content: space-between;
            .CertificateInformation{
                width: 430px;
                height: 516px;
                opacity: 1;
                background: #ffffff;
                border-radius: 8px;
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Heavy;
                font-weight: 800;
                text-align: left;
                color: #ffffff;
                .CertificateInformation_top{
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;;
                   /deep/.el-dialog{
                        width: 500px;
                    }
                    .title{
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Bold;
                        font-weight: 700;
                        color: #000000;
                    }
                }
                .content{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow:auto;
                    max-height: 450px;
                    /deep/.el-dialog{
                        width: 500px;
                    }
                    .right{
                        display: flex;
                        justify-content: space-between;
                    }
                    .watchHomeCode{
                        span{
                            cursor: pointer;
                        }
                        span:hover{
                            color: #8cc5ff;
                        }
                        span:nth-child(2){
                            margin-left: 30px;
                        }
                    }
                }
                .project{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 12px;
                    min-height: 80px;
                    width: 350px;
                    height: 80px;
                    opacity: 1;
                    background: url("../assets/img/certificate_img/bg2.png");
                    border-radius: 8px;
                    /*box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.03);*/
                    margin-top: 20px;
                    /deep/ .el-button--mini.is-circle{
                        background: RGB(45,108,233);
                    }

                }
            }
            .option{
                width: 784px;
                height: 516px;
                opacity: 1;
                background: #ffffff;
                border-radius: 8px;
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
                .option_top{
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
                .el-menu-demo{
                    width: 200px;
                }
                .block{
                    padding-right: 20px;
                    padding-left: 20px;
                    .time{
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Bold;
                        font-weight: 700;
                        text-align: left;
                        color: #000000;
                    }
                    .detail{
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #858585;
                    }

                }
            }
        }
    }
}
</style>
